<template>
  <div style="border-top: 1px solid #EAEDF3; margin-top: 2px;">
    <section class="searchBox">
      <el-row v-if="listData &&listData.length > 0" :gutter="20">
        <el-col v-for="(item, index) in listData" :key="index" class="list-box" :span="6">
          <div
            class="describe"
            @click="$router.push({name:'teachReportDetail',query:{reportId:item.reportId}})"
          >
            <div class="fs-20 text-s-o line-height20" :title="listData.title">{{ item.title }}</div>
            <div class="classify marginT10">
              <div v-for="(categoryItem, categoryInx) in item.categoryNameList" :key="categoryInx">
                <span v-if="categoryInx === 0">{{ categoryItem }}</span>
                <span v-else>/{{ categoryItem }}</span>
              </div>
            </div>
            <div class="name marginT10">{{ item.nickname }}</div>
            <ul class="icon-box marginT20">
              <li class="text-s-o" :title="item.thumbCount">
                <el-image
                  class="img"
                  style="width: 20px; position: relative; top: 0px;"
                  :src="require('@/assets/images/report_give.png')"
                />
                <span class="num text-s-o">{{ item.thumbCount }}</span>
              </li>
              <li class="text-s-o" :title="item.commentCount">
                <el-image
                  class="img"
                  style="width: 18px; position: relative; top: 1px;"
                  :src="require('@/assets/images/report_comment.png')"
                />
                <span class="num text-s-o">{{ item.commentCount }}</span>
              </li>
              <li class="text-s-o" :title=" item.shareCount">
                <el-image
                  class="img"
                  style="width: 16px; position: relative; top:2px;"
                  :src="require('@/assets/images/report_share.png')"
                />
                <span class="num text-s-o">{{ item.shareCount }}</span>
              </li>
              <li class="text-s-o" :title="item.createTime">
                <el-image
                  class="img"
                  style="width: 18px; position: relative; top: 0px;"
                  :src="require('@/assets/images/report_time.png')"
                />
                <span class="num text-s-o">{{ item.createTime }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>

      <el-row v-else>
        <el-col class="list-box">
          <div style="text-align: center;">暂无教研报告数据</div>
        </el-col>
      </el-row>

      <Pagination
        v-if="total > 0"
        :limit="12"
        :total="total"
        class="pagination"
        @pagination="pagination"
      />
    </section>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { collectTeachingResearchReport } from '@/api/myCollect'
import { liveState } from './data'
export default {
  name: 'Report',
  components: {
    Pagination
  },
  data () {
    return {
      listData: null,
      total: null,
      listQuery: {
        pager: {
          page: 1,
          pageSize: 12
        }
      }

    }
  },

  watch: {
  },
  mounted () {

  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      await this.searchList()
    },
    searchList () {
      collectTeachingResearchReport(this.listQuery).then(res => {
        console.log('collectTeachingResearchReport:', res.data.records)
        this.listData = res.data.records
        this.total = res.data.total
      })
    },
    pagination ({ page, limit }) {
      this.listQuery.pager.page = page
      this.listQuery.pager.pageSize = limit
      this.init()
    }

  }
}
</script>
<style lang="scss" scoped>
.searchBox {
  padding: 24px 40px;
}

.list-box {
  border-radius: 10px;
  overflow: hidden;
  margin-top: 24px;
  .orgName {
    display: flex;
    align-content: center;
    span {
      flex: 1;
      color: rgba(0, 0, 0, 0.45);
    }
  }
  .block {
    background-color: white;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    text-align: center;
  }
  .img {
    width: 100%;
  }
  .describe {
    padding: 20px 24px;
    background-color: white;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 24px;
    .classify {
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 0.65);
      line-height: 14px;
      display: flex;
    }
    .name {
      font-family: MicrosoftYaHei;
      color: rgba(140, 140, 140, 1);
      line-height: 14px;
    }
    .icon-box {
      display: flex;
      justify-content: space-between;
      li {
        display: flex;
        align-items: center;
        .num {
          font-family: MicrosoftYaHei;
          color: rgba(0, 0, 0, 0.45);
          line-height: 22px;
          margin-left: 4px;
          flex: 1;
        }
      }
      li:not(:last-child) {
        max-width: 56px;
        min-width: 50px;
      }
      li:last-child {
        flex: 1;
      }
    }
  }
}
.pagination {
  margin-top: 20px;
}
</style>
